<template>
  <div class="school-major">
    <div class="header">
      <div
        v-for="(item, index) in titleList"
        :key="index"
        :class="'header-item-' + index"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="main" v-if="majorList.length > 0">
      <!-- 专业层级 -->
      <div class="major-level">
        <div
          :class="{
            'major-level-item': true,
            active: nowMajorLevel.proTypeDesc == item.proTypeDesc,
          }"
          v-for="(item, index) in majorList"
          :key="index"
          @click="selectMajorLevel(item)"
        >
          {{ item.proTypeDesc }}
        </div>
      </div>
      <!-- 学科门类 -->
      <div class="major-disc">
        <div
          :class="{
            'major-disc-item': true,
            active: nowMajorDisc.discCats == item.discCats,
          }"
          v-for="(item, index) in nowMajorLevel.children"
          :key="index"
          @click="selectMajorDisc(item)"
        >
          {{ item.discCats }}
        </div>
      </div>
      <!-- 专业类别 -->
      <div class="major-category">
        <div
          :class="{
            'major-category-item': true,
            active: nowMajorCategory.majCats == item.majCats,
          }"
          v-for="(item, index) in nowMajorDisc.children"
          :key="index"
          @click="selectMajorCategory(item)"
        >
          {{ item.majCats }}
        </div>
      </div>
      <!-- 专业名称 -->
      <div class="major-name">
        <div
          :class="{ 'major-name-item': true }"
          v-for="(item, index) in nowMajorCategory.children"
          :key="index"
          @click="jumpToMajorDetail(item, index)"
        >
          <span class="major-name-item-name">{{ item.tagName }} </span>
          <!-- <span class="major-tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
            {{ tag }}
          </span> -->
          <span class="major-tag" v-if="item.tags?.length > 0">
            {{ item.tags[0] }}
          </span>
          <div class="major-education-year">
            {{ item.educationYear }}
          </div>
          <div class="major-code">
            {{ item.positionTagId }}
          </div>
        </div>
      </div>
      <!-- 学制 -->
      <!-- <div class="major-education-year">
        <div
          :class="{ 'major-education-year-item': true }"
          v-for="(item, index) in nowMajorCategory.children"
          :key="index"
        >
          {{ item.educationYear }}
        </div>
      </div> -->
      <!-- 专业代码 -->
      <!-- <div class="major-code">
        <div
          :class="{ 'major-code-item': true }"
          v-for="(item, index) in nowMajorCategory.children"
          :key="index"
        >
          {{ item.positionTagId }}
        </div>
      </div> -->
    </div>
    <div class="empty" v-else>
      <Empty />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, watch } from 'vue';
import { getCollegeTagsTree } from '@/api/collegeSearch';
import Empty from '@/components/Empty.vue';
import { useRoute, useRouter } from 'vue-router'; // 导入路由
const router = useRouter();
// 获取当前的路由对象
const route = useRoute();
const props = defineProps({
  currentCollegeId: {
    type: String,
    default: () => '',
  },
});
const titleList = ref([
  {
    title: '专业层级',
  },
  {
    title: '学科门类',
  },
  {
    title: '专业类别',
  },
  {
    title: '专业名称',
  },
  {
    title: '学制',
  },
  {
    title: '专业代码',
  },
]);
const majorList = ref([]);

const nowMajorLevel = ref({});
const nowMajorDisc = ref({});
const nowMajorCategory = ref({});

// 选择专业层级 一级
const selectMajorLevel = (item) => {
  nowMajorLevel.value = item;
  nowMajorDisc.value = item?.children[0];
  nowMajorCategory.value = item?.children[0]?.children[0];
};

// 选择学科门类 二级
const selectMajorDisc = (item) => {
  nowMajorDisc.value = item;
  nowMajorCategory.value = item.children[0];
};

// 选择专业类别 三级
const selectMajorCategory = (item) => {
  nowMajorCategory.value = item;
};

const getCollegeTagsFn = async () => {
  const res = await getCollegeTagsTree({
    collegeId: props.currentCollegeId,
  });
  if (res.code == 200) {
    majorList.value = res.data;
    selectMajorLevel(majorList.value[0]);
  }
};

const jumpToMajorDetail = (item, index) => {
  router.push({
    name: 'MajorDetail',
    query: {
      positionTagId: item.positionTagId,
      tagName: item.tagName,
      cateType: item.proType,
    },
  });
};
//监控currentCollegeId变化
watch(
  () => props.currentCollegeId,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      getCollegeTagsFn();
    }
  },
  {
    deep: true,
  }
);

onMounted(() => {
  getCollegeTagsFn();
});
</script>

<style lang="scss" scoped>
.school-major {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
    background: #ffffff;
    border-radius: 20px 20px 0px 0px;
    display: flex;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22px;
    color: #666666;
    border-bottom: 1px solid #f5f5f5;
    & > div {
      padding: 0 0 0 56px;
      box-sizing: border-box;
    }
    .header-item-0 {
      width: 185px;
    }
    .header-item-1 {
      width: 283px;
    }
    .header-item-2 {
      width: 283px;
    }
    .header-item-3 {
      width: 660px;
    }
    .header-item-4 {
      width: 221px;
    }
    .header-item-5 {
      width: 250px;
    }
  }
  .main {
    display: flex;
    // flex: 1;
    height: 540px;
    // 公共列样式
    > div {
      // display: flex;
      flex-direction: column;
      border-right: 1px solid #f5f5f5;
      // 最后一列不需要右边框
      &:last-child {
        border-right: none;
      }
      // 公共 item 样式
      > div {
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26px;
        color: #666666;
        box-sizing: border-box;
        padding-left: 56px;
        // 高度和背景按需覆盖
      }
      // active 状态
      .active {
        color: #0b6eff;
        background: #f6fafe;
        font-weight: bold;
      }
    }
    // 各列宽度
    .major-level {
      width: 185px;
    }
    .major-disc {
      width: 283px;
      height: 100%;
      overflow-y: scroll;
    }
    .major-category {
      width: 283px;
      height: 100%;
      overflow-y: scroll;
    }
    .major-name {
      // width: 660px;
      flex: 1;
      height: 100%;
      overflow-y: scroll;
    }
    // .major-education-year {
    //   width: 221px;
    //   height: 100%;
    //   overflow-y: scroll;
    // }
    // .major-code {
    //   width: 250px;
    //   border-right: none;
    //   height: 100%;
    //   overflow-y: scroll;
    // }
    // 各列特殊样式
    .major-level-item,
    .major-disc-item,
    .major-category-item {
      height: 90px;
      // .major-category-item 需要特殊 padding
      &.major-category-item {
        padding: 0 20px 0 56px;
        box-sizing: border-box;
      }
    }
    .major-name-item {
      min-height: 90px;
      background: #f6fafe;
      padding: 0 32px 0 56px;
      .major-name-item-name {
        display: inline-block;
        // margin-right: 10px;
        width: 660px;
        font-size: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }
      .major-education-year,
      .major-code {
        display: flex;
        align-items: center;
        box-sizing: border-box;
      }
      .major-education-year {
        width: 221px;
        padding-left: 56px;
      }
      .major-code {
        width: 250px;
        padding-left: 76px;
      }
      .major-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #e8f2ff;
        height: 30px;
        border-radius: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #1b87df;
        line-height: 28px;
        padding: 1px 14px;
        margin-top: 4px;
      }
    }
    .major-education-year-item,
    .major-code-item {
      height: 90px;
      background: #f6fafe;
      font-size: 26px;
      font-weight: 400;
      color: #666666;
      padding: 0 56px;
    }
  }
  .empty {
    height: 540px;
  }
}
</style>
